<template>
	<view class="container">
		<view class="doctor-info">
			<image class="doctor-avatar" :src="doctorInfo.avatar" mode="aspectFill"></image>
			<view class="doctor-detail">
				<view class="doctor-name">{{ doctorInfo.name }}</view>
				<view class="doctor-title">{{ doctorInfo.title }}</view>
				<view class="doctor-department">{{ dept.name }}</view>
				<view class="doctor-hospital">{{ hospitalInfo.name }}</view>
			</view>
		</view>

		<view class="schedule-tabs">
			<scroll-view scroll-x="true" class="scroll-x">
				<view class="tab-item" :class="{ active: currentDateTab === index }" v-for="(item, index) in dateList"
					:key="index" @click="switchDateTab(index)">
					<view class="tab-week">{{ item.week }}</view>
					<view class="tab-date">{{ item.date }}</view>
				</view>
			</scroll-view>
		</view>

		<view class="time-slots">
			<view class="time-slot-group" v-for="(group, index) in timeSlotGroups" :key="index">
				<view class="group-title">{{ group.title }}</view>
				<view class="time-slot-list">
					<view class="time-slot-item"
						:class="{ disabled: !slot.available, active: selectedTimeSlot === slot }"
						v-for="slot in group.slots" :key="slot.id" @click="selectTimeSlot(slot)">
						<view class="slot-time">{{ slot.time }}</view>
						<view class="slot-status">{{ slot.available ? '可预约' : '已约满' }}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="appointment-form">
			<view class="form-item">
				<view class="item-label">就诊人</view>
				<view class="item-value" @click="selectPatient">
					<text v-if="selectedPatient">{{ selectedPatient.name }}</text>
					<text v-else>请选择就诊人</text>
					<uni-icons type="right" size="15"></uni-icons>
				</view>
			</view>
			<view class="form-item">
				<view class="item-label">身份证号</view>
				<view class="item-value">
					<text v-if="selectedPatient">{{ selectedPatient.idCard }}</text>
				</view>
			</view>
			<view class="form-item">
				<view class="item-label">联系电话</view>
				<view class="item-value">
					<text v-if="selectedPatient">{{ selectedPatient.phone }}</text>
				</view>
			</view>
			<view class="form-item">
				<view class="item-label">症状描述</view>
				<textarea class="symptom-input" v-model="symptomDesc" placeholder="请简要描述症状，帮助医生提前了解您的情况"></textarea>
			</view>
		</view>

		<view class="confirm-btn" @click="confirmAppointment">确认预约</view>
	</view>
</template>

<script>
	import {
		DOCTOR_LIST,
		DEPARTMENT_LIST,
		HOSPITAL_LIST
	} from '@/config.js'
	export default {
		data() {
			return {
				doctorId: 1,
				doctorInfo: {},
				dept: {},
				hospitalId: 1,
				deptId: 1,
				hospitalInfo: {},
				currentDateTab: 0,
				dateList: [{
						week: '周一',
						date: '今天',
						value: '2025-07-01'
					},
					{
						week: '周二',
						date: '明天',
						value: '2025-07-02'
					},
					{
						week: '周三',
						date: '07-03',
						value: '2025-07-03'
					},
					{
						week: '周四',
						date: '07-04',
						value: '2025-07-04'
					},
					{
						week: '周五',
						date: '07-05',
						value: '2025-07-05'
					},
					{
						week: '周六',
						date: '07-06',
						value: '2025-07-06'
					},
					{
						week: '周日',
						date: '07-07',
						value: '2025-07-07'
					}
				],
				timeSlotGroups: [{
						title: '上午',
						slots: [{
								id: 1,
								time: '08:00-08:30',
								available: true
							},
							{
								id: 2,
								time: '08:30-09:00',
								available: true
							},
							{
								id: 3,
								time: '09:00-09:30',
								available: false
							},
							{
								id: 4,
								time: '09:30-10:00',
								available: true
							},
							{
								id: 5,
								time: '10:00-10:30',
								available: true
							},
							{
								id: 6,
								time: '10:30-11:00',
								available: true
							},
							{
								id: 7,
								time: '11:00-11:30',
								available: false
							},
							{
								id: 8,
								time: '11:30-12:00',
								available: true
							}
						]
					},
					{
						title: '下午',
						slots: [{
								id: 9,
								time: '13:30-14:00',
								available: true
							},
							{
								id: 10,
								time: '14:00-14:30',
								available: true
							},
							{
								id: 11,
								time: '14:30-15:00',
								available: true
							},
							{
								id: 12,
								time: '15:00-15:30',
								available: false
							},
							{
								id: 13,
								time: '15:30-16:00',
								available: true
							},
							{
								id: 14,
								time: '16:00-16:30',
								available: true
							},
							{
								id: 15,
								time: '16:30-17:00',
								available: false
							},
							{
								id: 16,
								time: '17:00-17:30',
								available: true
							}
						]
					}
				],
				selectedTimeSlot: null,
				patientList: [{
						id: 1,
						name: '张三',
						idCard: '110101199001011234',
						phone: '13800138000',
						isDefault: true
					},
					{
						id: 2,
						name: '张小明',
						idCard: '110101201001011234',
						phone: '13800138001',
						isDefault: false
					}
				],
				selectedPatient: null,
				symptomDesc: ''
			}
		},
		onLoad(options) {
			// 这里可以根据传递的doctorId加载对应医生信息
			if (options.doctorId) this.doctorId = options.doctorId
			if (options.hospitalId) this.hospitalId = options.hospitalId
			if (options.deptId) this.deptId = options.deptId
			this.doctorInfo = DOCTOR_LIST.find(item => item.id == this.doctorId)
			this.hospitalInfo = HOSPITAL_LIST.find(item => item.id == this.hospitalId)
			this.dept = DEPARTMENT_LIST.find(item => item.id == this.deptId)

			// 设置默认选中的就诊人
			this.selectedPatient = this.patientList.find(patient => patient.isDefault) || this.patientList[0];

			uni.$on('selectPatient', (patient) => {
				this.selectedPatient = patient;
			});
		},
		onUnload() {
			// 页面卸载时移除事件监听，避免内存泄漏
			uni.$off('selectPatient');
		},
		methods: {
			switchDateTab(index) {
				this.currentDateTab = index;
				// 这里可以根据选择的日期加载对应时间段
			},
			selectTimeSlot(slot) {
				if (slot.available) {
					this.selectedTimeSlot = slot;
				}
			},
			selectPatient() {
				uni.navigateTo({
					url: '/pages/patientList/patientList'
				});
			},
			confirmAppointment() {
				if (!this.selectedTimeSlot) {
					uni.showToast({
						title: '请选择预约时间段',
						icon: 'none'
					});
					return;
				}

				if (!this.selectedPatient) {
					uni.showToast({
						title: '请选择就诊人',
						icon: 'none'
					});
					return;
				}

				// 这里可以添加提交预约的逻辑
				/* console.log('提交预约:', {
					doctorId: this.doctorInfo.id,
					hospitalId: this.hospitalInfo.id,
					appointmentDate: this.dateList[this.currentDateTab].value,
					appointmentTime: this.selectedTimeSlot.time,
					patientId: this.selectedPatient.id,
					symptomDesc: this.symptomDesc
				}); */

				uni.showModal({
					title: '预约成功',
					content: `您已成功预约${this.doctorInfo.name}医生，就诊时间：${this.dateList[this.currentDateTab].week} ${this.dateList[this.currentDateTab].date} ${this.selectedTimeSlot.time}`,
					showCancel: false,
					success: function(res) {
						if (res.confirm) {
							uni.navigateBack();
						}
					}
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
		padding-bottom: 120rpx;
	}

	.doctor-info {
		display: flex;
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.doctor-avatar {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.doctor-detail {
		flex: 1;
	}

	.doctor-name {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.doctor-title {
		font-size: 24rpx;
		color: #1677ff;
		margin-bottom: 10rpx;
	}

	.doctor-department {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.doctor-hospital {
		font-size: 24rpx;
		color: #999;
	}

	.schedule-tabs {
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.schedule-tabs .scroll-x {
		white-space: nowrap;
	}

	.schedule-tabs .tab-item {
		display: inline-block;
		width: 160rpx;
		text-align: center;
		padding: 16rpx 0;
		margin: 0 10rpx;
		border-radius: 16rpx;
	}

	.schedule-tabs .tab-item.active {
		background-color: #1677ff;
		color: #fff;
	}

	.schedule-tabs .tab-week {
		font-size: 28rpx;
	}

	.schedule-tabs .tab-date {
		font-size: 24rpx;
		margin-top: 4rpx;
	}

	::v-deep .uni-scroll-view .uni-scroll-view {
		padding: 20rpx 0;
	}

	.time-slots {
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.time-slot-group {
		padding: 20rpx 30rpx;
	}

	.group-title {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.time-slot-list {
		display: flex;
		flex-wrap: wrap;
	}

	.time-slot-item {
		width: calc(33.33% - 20rpx);
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		border: 1rpx solid #eee;
		border-radius: 10rpx;
		padding: 20rpx 0;
		text-align: center;
	}

	.time-slot-item:nth-child(3n) {
		margin-right: 0;
	}

	.time-slot-item.disabled {
		background-color: #f5f5f5;
		color: #999;
	}

	.time-slot-item.active {
		border-color: #1677ff;
		background-color: #e6f4ff;
	}

	.slot-time {
		font-size: 24rpx;
		margin-bottom: 6rpx;
	}

	.slot-status {
		font-size: 20rpx;
	}

	.appointment-form {
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.form-item {
		display: flex;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.form-item:last-child {
		border-bottom: none;
	}

	.item-label {
		width: 160rpx;
		font-size: 28rpx;
		color: #333;
	}

	.item-value {
		flex: 1;
		font-size: 28rpx;
		color: #666;
		text-align: right;
	}

	.item-value .uni-icons {
		margin-left: 10rpx;
	}

	.symptom-input {
		width: 100%;
		text-align: left;
		font-size: 28rpx;
		color: #666;
		min-height: 160rpx;
	}

	.confirm-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #1677ff;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		padding: 30rpx 0;
	}
</style>